<template>
	<view class="container">
		<u-loading-page :loading="swipLoading" loading-text="加载中..."></u-loading-page>
		<image class="topBgImg" :src="downloadBkPic('productBg')" mode="widthFix"></image>
		<view class="swpBox" v-if="swpList && swpList.length">
			<scroll-view scroll-y="true">
				<u-swiper :list="swpList" keyName="url" :autoplay="false" indicator circular :current="swpCurrent"
					@change="onSwpChange" indicatorActiveColor="#B0C93E" radius="15" :loading="swipLoading"
					@touchstart="touchstart" @touchend="touchend">
				</u-swiper>
			</scroll-view>

		</view>
		<view class="topBox" v-if="!swipLoading">
			<image class="titlebgImg" src="../../static/detail/productTitleBg.png" mode=""></image>
			<image class="dbSix" src="../../static/detail/66.png" mode=""></image>
			<image class="dbNine" src="../../static/detail/99.png" mode=""></image>
			<view class="introduceBox">
				<view class="introduceItem" v-for="(item,index) in productDesc" :key="index">

					<text :user-select="true" style="display: flex;">{{item.content[0]}}</text>
				</view>
				<!-- <text class="topTxt">
				</text>
				<text>{{productDesc}}</text> -->
			</view>
		</view>

		<view class="tabBox" v-if="tabMsg && tabMsg.length>2">
			<view v-for="(item,index) in tabMsg" :key="index" :class="item.checked && 'activeTab'" @click="but(item)">
				{{item.title}}
			</view>

		</view>

		<!-- 适用对象 -->
		<view :class="isMoreBtnShow1?'radiusBox showMoreMargin':'radiusBox'" id="a1"
			v-if="pageText1 && pageText1.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/prod1.png" mode=""></image>
					<text>适用对象</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom.png" mode=""></image>
			</view>
			<view :class="!isShowMore1?'longHeightTxtBox1 fixHeightBox':'longHeightTxtBox1'">
				<view class="topOneItem" v-for="(item,index) in pageText1" :key="index">

					<text class="pageText1BoxTxt" :user-select="true">{{item.content[0]}}</text>
				</view>
			</view>
			<view class="showMoreBox" @click="onOpenBtnClick(1)" v-if="isMoreBtnShow1">
				<text v-if="!isShowMore1">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore1" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>

		<!-- 功能介绍 -->
		<view :class="isMoreBtnShow6?'radiusBox showMoreMargin':'radiusBox'" id="a8"
			v-if="pageText8 && pageText8.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/prod8.png" mode=""></image>
					<text>功能介绍</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom.png" mode=""></image>
			</view>
			<view :class="!isShowMore6?'longHeightTxtBox8 fixHeightBox':'longHeightTxtBox8'">
				<view class="topTwoItem" v-for="(item,index) in pageText8" :key="index">
					<view v-if="item.title">
						{{item.title}}
					</view>
					<text :class="!item.title?'pageText8BoxTxt blockTxt':'pageText8BoxTxt'"
						:user-select="true">{{item.content[0]}}</text>
				</view>
			</view>
			<view class="showMoreBox" @click="onOpenBtnClick(8)" v-if="isMoreBtnShow6">
				<text v-if="!isShowMore6">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore6" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>

		<view :class="isMoreBtnShow2?'radiusBox showMoreMargin':'radiusBox'" id="a2"
			v-if="pageText2 && pageText2.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/prod2.png" mode=""></image>
					<text>产品优势</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom.png" mode=""></image>
			</view>
			<view :class="!isShowMore2?'longHeightTxtBox2 fixHeightBox':'longHeightTxtBox2'">
				<view class="topTwoItem" v-for="(item,index) in pageText2" :key="index">
					<view v-if="item.title">
						{{item.title}}
					</view>
					<text style="" :class="!item.title?'pageText2BoxTxt blockTxt':'pageText2BoxTxt'"
						:user-select="true">{{item.content[0]}}</text>
				</view>
			</view>
			<view class="showMoreBox" @click="onOpenBtnClick(2)" v-if="isMoreBtnShow2">
				<text v-if="!isShowMore2">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore2" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>


		<view :class="isMoreBtnShow3?'radiusBox showMoreMargin':'radiusBox'" id="a3"
			v-if="pageText3 && pageText3.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/prod3.png" mode=""></image>
					<text>服务案例</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom.png" mode=""></image>
			</view>
			<view :class="!isShowMore3?'longHeightTxtBox3 fixHeightBox':'longHeightTxtBox3'">
				<view class="pageText3Box" v-for="(item,index) in pageText3" :key="index">
					<view v-if="item.title" class="pageText3BoxTopBox">
						{{item.title}}
					</view>
					<view class="pageText3BoxBottomBox">
						<text :class="'pageText3BoxTxt pageText3BoxTxt'+(index+1)" v-for="(it,idx) in item.content"
							:user-select="true" :key="idx">{{it}}</text>
					</view>
				</view>
			</view>
			<view class="showMoreBox" @click="onOpenBtnClick(3)" v-if="isMoreBtnShow3">
				<text v-if="!isShowMore3">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore3" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>

		<view :class="isMoreBtnShow4?'radiusBox showMoreMargin':'radiusBox'" id="a4"
			v-if="pageText4 && pageText4.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/prod4.png" mode=""></image>
					<text>办理流程</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom.png" mode=""></image>
			</view>
			<view :class="!isShowMore4?'longHeightTxtBox4 fixHeightBox':'longHeightTxtBox4'">
				<view class="pageText4Box" v-for="(item,index) in pageText4" :key="index">
					<view class="pageText4BoxTxt">
						{{item.content[0]}}
					</view>
				</view>
			</view>
			<view class="showMoreBox" @click="onOpenBtnClick(4)" v-if="isMoreBtnShow4">
				<text v-if="!isShowMore4">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore4" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>
		<view :class="isMoreBtnShow5?'radiusBox showMoreMargin':'radiusBox'" id="a4"
			v-if="pageText5 && pageText5.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/prod5.png" mode=""></image>
					<text>办理材料</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom.png" mode=""></image>
			</view>
			<view :class="!isShowMore5?'longHeightTxtBox5 fixHeightBox':'longHeightTxtBox5'">
				<view class="pageText5Box" v-for="(item,index) in pageText5" :key="index">
					<view class="pageText5BoxTxt">
						{{item.content[0]}}
					</view>
				</view>
			</view>
			<view class="showMoreBox" @click="onOpenBtnClick(5)" v-if="isMoreBtnShow5">
				<text v-if="!isShowMore5">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore5" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>

		<view class="radiusBox bottomItem" v-if="pageText6 && pageText6.length" id="a6">
			<image class="tagImg" :src="downloadBkPic('yangye')" mode=""></image>
			<view class="pageText6Box">
				<view v-for="(item,index) in pageText6" :key="index" @click="onConnectItemClick(item)">
					<view>
						{{item.connectionProductName}}
					</view>
				</view>
			</view>
		</view>

		<!-- 操作指引 todo -->
		<view class="radiusBox bottomItem" v-if="pageText7 && pageText7.length">
			<image class="tagImg" src="../../static/detail/zhiyin.png" mode=""></image>
			<view class="pageText6Box">
				<view v-for="(item,index) in pageText7" :key="index" @click="onGuideItemClick(item)">
					<view>
						{{item.connectionProductName}}
					</view>
				</view>
			</view>
		</view>

		<view class="zhanwei">

		</view>
		<view class="fixedBottomBox">
			<view class="">
				<view>
					<u-icon color="#9C9C9C" size="26" name="share"></u-icon>
					<text>分享</text>
					<button class="shareBtn" open-type="share" :data-item="{pageId,shareId}"></button>
				</view>
				<view @click="onFavoriteClick">
					<u-icon v-if="!isFavoriteLoading" :color="isFavorite?'#7ED321':'#9C9C9C'" size="26"
						:name="isFavorite?'star-fill':'star'">
					</u-icon>
					<u-loading-icon color="#7ED321" v-else></u-loading-icon>
					<text>收藏</text>
				</view>

			</view>
			<view class="">
				<view class="lftCircle" @click="shareClick">
					<u-icon color="#fff" size="26" name="photo"></u-icon>生成海报
				</view>
				<view class="rtCircle" @click="onPurposeClick">
					{{ isSpecialProduct? '我要测额':'意向登记' }}
				</view>
			</view>
		</view>
		<u-popup :show="isPopShow" :round="10" :closeOnClickOverlay="false" closeable mode="bottom" @close="onPopClose"
			@open="onPopOpen">
			<view class="popupBox">
				<view class="popTitle">生成海报</view>
				<view class="popMsgBox">
					<view>
						<view class="popItemBtn jianjieBtn">产品简介</view>
					</view>
				</view>
				<view class="popMsgBox">
					<text>-选择您要生成海报的部分-</text>
					<view>
						<view v-for="(item,index) in popItemList" :key="index" @click="onPopItemClick(item)"
							:class="item.checked?'popItemBtn checkedPopBtn':'popItemBtn'">
							{{item.name}}
						</view>
					</view>
					<view :class="popConfirmBtnDissable?'popConfirmBtn popConfirmDissabled':'popConfirmBtn'"
						@click="onPopConfrimClick">
						下一步
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 新人首次登录弹窗 -->
		<popLogin :isShow='showAuth' @onreject="onreject" @onLoginConfirm="onLoginConfirm"></popLogin>

		<!-- 下载进度 -->
		<u-modal v-if="progressShow" :show="progressShow" title='正在下载资源' confirmText="取消下载" @confirm="onModalConfirm">
			<view class="slot-content">
				<u-line-progress :percentage="progress" activeColor="#7bc647"></u-line-progress>
			</view>
		</u-modal>
		<movable-area v-if="isSpecialProduct"
			style="width: 100vw;height: calc(100vh - 60px);position: fixed;left: 0;top: 0;">
			<movable-view :x="x" :y="y" style="display: flex;flex-flow:column;width: 100rpx;height: 150rpx;text-align: center;
				border-radius: 50%;" direction="all" @click="navigateWebView">
				<div style="width:100%;height: 100%;">
					<image style="width: 100%;height: 100%;" src="../../static/main/h5-icon.png"></image>
				</div>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import {
		queryByCondition,
		insertShare,
		insertFavorite,
		canalFavorite,
		whetherFavorite,
		queryById
	} from "@/apis/product.js"
	import {
		getPhone,
		queryByOpenId,
		login,
	} from "@/apis/index.js"
	import {
		baseURL,
		downloadVideo,
		download,
		throttle,
		downloadBkPic
	} from "@/utils/util"

	import popLogin from "@/components/popLogin.vue"
	import Encrypt from '@/utils/aesUtil'

	import {
		queryPublicKey
	} from "../../apis"
	import {
		getH5Url
	} from "../../utils/util"

	export default {
		onShareAppMessage(res) {

			return new Promise((resolve, reject) => {
				const params = {
					businessId: this.pageId,
					businessType: 1
				}
				insertShare(params).then(re => {
					if (re.code == '00000000') {
						console.log(re.data)
						this.shareId = re.data
						resolve({
							title: this.pageTitle,
							path: `/pages/product/productDetail?id=${this.pageId}&shareId=${re.data}`,
						})
					}
				})
			})


		},
		components: {
			popLogin
		},
		data() {
			return {
				pageTitle: '',
				isSpecialProduct: false,
				productDesc: [], // 产品介绍
				pageId: '',
				shareId: '',
				swpList: [],
				swpCurrent: 0,
				swipLoading: true, // 一进来就给他转
				isFavoriteLoading: true,

				isShowMore1: true, // 展开更多
				isShowMore2: true,
				isShowMore3: true,
				isShowMore4: true,
				isShowMore5: true,
				isShowMore6: true,
				isMoreBtnShow1: false,
				isMoreBtnShow2: false,
				isMoreBtnShow3: false,
				isMoreBtnShow4: false,
				isMoreBtnShow5: false,
				isMoreBtnShow6: false,

				pageText1: [],
				pageText2: [],
				pageText3: [],
				pageText4: [],
				pageText5: [],
				pageText6: [], // 行业应用

				pageText7: [ // 操作指引 todo
					// {
					// 	connectionProductName: "使用指引1",
					// 	url: "https://mp.weixin.qq.com/s/d0eA0iksz6Il2Zk0_PLOxA"
					// },
					// {
					// 	connectionProductName: "使用指引2",
					// 	url: "https://www.bilibili.com"
					// },
				],
				pageText8: [],
				popItemList: [], // 生成海报item数据
				tabMsg: [],
				isFavorite: false, // 是否已收藏
				isPopShow: false,
				popConfirmBtnDissable: true, // 生成海报下一步是否禁用
				showAuth: false,
				isPicShare: true,

				isLongPress: false, // 长按计时器
				longPressTimer: null, // 长按定时器
				downItem: {}, // 要下载的数据
				progress: 0, // 下载进度
				progressShow: false,
				downloadTask: null,
				x: 0,
				y: 0
			}
		},
		onLoad(option) {
			if (option.id) {
				this.isPicShare = true
				this.pageId = option.id
				if (option.shareId) {
					this.shareId = option.shareId
					this.isPicShare = false // 分享进来的点返回回主页
					this.getQuekLogin() // 有shareId说明是分享进来的 判断登录
				} else {
					this.getPageMsg()
				}
			} else { // 如果没有id 带scene 则说明是分享海报进来的，拿shareId获取id
				if (option.scene) {
					//获取二维码的携带的链接信息
					let qrUrl = decodeURIComponent(option.scene)
					this.isBackImgShow = false

					this.isPicShare = false
					console.log(qrUrl)
					this.shareId = qrUrl.split('=')[1]
					this.getQuekLogin() // 静默登录
				}
			}
			this.initMovablePosition()
		},
		methods: {
			downloadBkPic,
			onSwpChange(val) {
				this.swpCurrent = val.current
			},
			longPress() {
				console.log(this.swpCurrent, 'curent11111')
				//长按事件
				this.isLongPress = true
				this.downItem = this.swpList[this.swpCurrent] // 当前长按的数据
				console.log(this.downItem, 32323)
				let msg = '保存当前资源'
				let isVideo = true
				if (this.downItem.type && this.downItem.type == 'video') {
					msg = '保存当前视频'
					isVideo = true
				} else {
					msg = '保存当前图片'
					isVideo = false
				}


				uni.showModal({
					content: msg,
					success: (res) => {
						if (res.confirm) {

							this.saveImage(this.downItem.url, isVideo)
						}
					}
				})
			},
			touchstart() {
				this.longPressTimer = setTimeout(() => {
					this.longPress()
				}, 1000)
			},
			touchend() {
				// 延时执行了防止click()还未判断isLongpress的值就被置为false
				clearTimeout(this.longPressTimer)
				setTimeout(() => {
					this.isLongPress = false
				}, 200)
			},

			/**
			 * 保存图片
			 * url 图片url地址
			 * is_video是否视频
			 */
			saveImage: function(url, is_video) {
				let that = this;
				// 向用户发起授权请求
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// 已授权
						that.downLoadImg(url, is_video);
					},
					fail: () => {
						// 拒绝授权，获取当前设置
						uni.getSetting({
							success: (result) => {
								if (!result.authSetting['scope.writePhotosAlbum']) {
									that.isAuth()
								}
							}
						});
					}
				})
			},

			onModalConfirm() {
				if (this.downloadTask) {
					this.downloadTask.abort()
					this.progressShow = false
					this.progress = 0
					this.$forceUpdate()

				}
			},
			/**
			 * 下载资源，保存图片到系统相册
			 */
			downLoadImg: function(url, is_video) {
				uni.showLoading({
					title: '加载中'
				})
				console.log(url)
				var fileExtName = is_video ? '.mp4' : '.png'; //指定后缀名
				const randfile = new Date().getTime() + fileExtName; //生成随机文件名
				const newPath = `${wx.env.USER_DATA_PATH}/${randfile}`; //完整的保存路径
				this.downloadTask = uni.downloadFile({
					url: url,
					filePath: newPath,
					success: (res) => {
						console.log('res: ', res);
						uni.hideLoading();
						if (res.statusCode === 200) {
							if (is_video == false) {
								// 图片下载
								const tempPath = res.filePath
								uni.saveImageToPhotosAlbum({
									filePath: tempPath,
									success: function() {
										uni.showToast({
											title: "已保存到相册",
											icon: "none"
										});
									},
									fail: function(err) {
										console.log('保存失败: ', err);
										uni.showToast({
											title: "保存失败，请稍后重试",
											icon: "none"
										});
									}
								});
							} else {
								// 视频下载
								uni.saveVideoToPhotosAlbum({
									filePath: res.filePath,
									success: function() {
										uni.showToast({
											title: "已保存到相册",
											icon: "none"
										});
									},
									fail: function() {
										uni.showToast({
											title: "保存失败，请稍后重试",
											icon: "none"
										});
									}
								})
							}

						} else {

							uni.showToast({
								title: "资源格式错误，请联系管理员",
								icon: "none"
							});
						}
						this.progressShow = false
						this.progress = 0
						this.downloadTask.abort() // 任务完成中断下载任务  
					},
					fail: (err) => {
						uni.showToast({
							title: "保存失败",
							icon: "none"
						});
						this.progressShow = false
						this.progress = 0
						this.downloadTask.abort() // 任务完成中断下载任务  
					}
				})
				this.downloadTask.onProgressUpdate((res) => {
					uni.hideLoading()
					this.progressShow = true
					this.progress = res.progress
					this.$forceUpdate()
				});


			},
			/*
			 * 引导用户开启权限
			 */
			isAuth: function() {
				uni.showModal({
					content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									console.log(result.authSetting);
								}
							});
						}
					}
				});
			},



			getPageMsg() {
				queryByCondition({
					id: this.pageId,
					shareId: this.shareId
				}).then(res => {
					if (res.code == '00000000') {
						const pageData = res.data[0].productionVOList[0]
						this.pageTitle = pageData.name


						uni.setNavigationBarTitle({
							title: pageData.name
						})
						whetherFavorite({
							businessId: this.pageId,
							businessType: 1
						}).then(re => {
							if (re.code == '00000000') {
								this.isFavorite = re.data
								this.isFavoriteLoading = false
							} else {
								this.isFavoriteLoading = false
							}

						})
						let swipData = []
						let swipData2 = []
						if (pageData.video && pageData.video.length) {
							for (let item of pageData.video) {


								// 如果不是404就直接用链接访问,不然就用以前的
								let urlvideo = `https://static.yqy.psbc.com/videos/${item.videoId}.mp4`

								const that = this
								wx.request({
									url: `https://static.yqy.psbc.com/videos/${item.videoId}.mp4`, // 请求资源 报404就用以前的
									method: 'GET',
									responseType: "arraybuffer",
									success(res) {
										if (res.statusCode == 200) {

										} else {
											urlvideo = downloadVideo(item.videoId)

										}
									},
									fail(err) {
										urlvideo = downloadVideo(item.videoId)

									}
								});


								setTimeout(() => {
									if (!item.coverId) {
										swipData.push({
											url: urlvideo,
											type: 'video'
										})
									} else {
										swipData.push({
											url: urlvideo,
											poster: download(item.coverId),
											type: 'video'
										})
									}
								}, 800)


							}


						}
						if (pageData.posterId && pageData.posterId.length) {
							for (let item of pageData.posterId) {
								swipData.push({
									url: download(item),
								})
							}
						}

						setTimeout(() => {

							this.swpList = swipData
							console.log(this.swpList, 412222222)
						}, 800)
						this.productDesc = pageData.briefIntroduction // 简介
						this.pageText1 = pageData.audience // 适用对象
						this.pageText2 = pageData.advantage // 产品优势
						this.pageText3 = pageData.programme // 服务案例
						this.pageText4 = pageData.process // 办理流程
						this.pageText5 = pageData.material // 办理材料
						this.pageText6 = pageData.application // 行业应用
						this.pageText7 = pageData.operationIntro // 操作指引
						this.pageText8 = pageData.introduction // 功能介绍
						// if (pageData.name == '企业网银') {
						// 	this.pageText7 = [{
						// 			connectionProductName: "账户查询篇",
						// 			url: "https://mp.weixin.qq.com/s/d0eA0iksz6Il2Zk0_PLOxA"
						// 		},
						// 		{
						// 			connectionProductName: "电子回单篇",
						// 			url: "https://mp.weixin.qq.com/s/eQ_QRWNOQUg7LNhq5nDoFw"
						// 		},
						// 		{
						// 			connectionProductName: "转账汇款篇",
						// 			url: "https://mp.weixin.qq.com/s/2PTUmQdPDfQshBGFphxnsw"
						// 		},
						// 		{
						// 			connectionProductName: "“网银首页”使用攻略",
						// 			url: "https://mp.weixin.qq.com/s/F06zo2OiylyUsR2d0xkL6A"
						// 		},
						// 		{
						// 			connectionProductName: "带您轻松搞定工资代发",
						// 			url: "https://mp.weixin.qq.com/s/bMXpjO8OcWaOsL9F7jBr0A"
						// 		},
						// 		{
						// 			connectionProductName: "首次登录指南",
						// 			url: "https://mp.weixin.qq.com/s/33vh3GpLMfWYwf8iLenVHQ"
						// 		},
						// 	]
						// } else if (pageData.name == '银企直联') {
						// 	this.pageText7 = [{
						// 		connectionProductName: "银企直连3.0",
						// 		url: "https://mp.weixin.qq.com/s/nqeSaC1Eqdu4jzvIjSaA1Q"
						// 	}]
						// } else if (pageData.name == '云直联') {
						// 	this.pageText7 = [{
						// 		connectionProductName: "邮储银行云直联",
						// 		url: "https://mp.weixin.qq.com/s/nqeSaC1Eqdu4jzvIjSaA1Q"
						// 	}]
						// }

						this.getTabMsg()
						this.swipLoading = false
						this.$forceUpdate()

						this.packUpTxtBox() // 是否显示展开更多按钮逻辑
						this.handleSpecialProduct()
					}
				})
			},
			handleSpecialProduct() {
				if (this.pageTitle == '小微e贷') {
					this.isSpecialProduct = true
				} else {
					this.isSpecialProduct = false
				}
			},
			getDomHeight(val, func) { // 获取当前元素高度
				// select中的参数就如css选择器一样选择元素
				let info = uni.createSelectorQuery().in(this).select(val);
				info.boundingClientRect(func).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				})
			},
			getDomsHeight(val, func) { // 获取所有当前类名元素高度 []
				// select中的参数就如css选择器一样选择元素
				let info = uni.createSelectorQuery().in(this).selectAll(val);
				info.boundingClientRect(func).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				})
			},
			packUpTxtBox() {
				setTimeout(() => {
					this.getDomHeight('.longHeightTxtBox1', (res) => {
						if (!res) {
							return
						}
						if (res.height > 250) {
							this.isShowMore1 = false
							this.isMoreBtnShow1 = true
						} else {
							this.isMoreBtnShow1 = false
						}
					})

					this.getDomHeight('.longHeightTxtBox2', (res) => {
						if (!res) {
							return
						}
						if (res.height > 250) {
							this.isShowMore2 = false
							this.isMoreBtnShow2 = true
						} else {
							this.isMoreBtnShow2 = false
						}
					})

					this.getDomHeight('.longHeightTxtBox3', (res) => {
						if (!res) {
							return
						}
						if (res.height > 250) {
							this.isShowMore3 = false
							this.isMoreBtnShow3 = true
						} else {
							this.isMoreBtnShow3 = false
						}
					})
					this.getDomHeight('.longHeightTxtBox4', (res) => {
						if (!res) {
							return
						}
						if (res.height > 250) {
							this.isShowMore4 = false
							this.isMoreBtnShow4 = true
						} else {
							this.isMoreBtnShow4 = false
						}
					})
					this.getDomHeight('.longHeightTxtBox5', (res) => {
						if (!res) {
							return
						}
						if (res.height > 250) {
							this.isShowMore5 = false
							this.isMoreBtnShow5 = true
						} else {
							this.isMoreBtnShow5 = false
						}
					})
					this.getDomHeight('.longHeightTxtBox8', (res) => {
						if (!res) {
							return
						}
						if (res.height > 250) {
							this.isShowMore6 = false
							this.isMoreBtnShow6 = true
						} else {
							this.isMoreBtnShow6 = false
						}
					})
				})
			},
			getTabMsg() {
				if (this.pageText1 && this.pageText1.length) {
					this.tabMsg.push({
						title: '适用对象',
						id: 'a1',
						checked: false
					})
				}
				if (this.pageText8 && this.pageText8.length) {
					this.tabMsg.push({
						title: '功能介绍',
						id: 'a8',
						checked: false
					})
				}
				if (this.pageText2 && this.pageText2.length) {
					this.tabMsg.push({
						title: '产品优势',
						id: 'a2',
						checked: false
					})
				}
				if (this.pageText3 && this.pageText3.length) {
					this.tabMsg.push({
						title: '服务案例',
						id: 'a3',
						checked: false
					})
				}
				if ((this.pageText4 && this.pageText4.length) || (this.pageText5 && this.pageText5.length)) {
					this.tabMsg.push({
						title: '业务办理',
						id: 'a4',
						checked: false
					})
				}
				if (this.pageText6 && this.pageText6.length) {
					this.tabMsg.push({
						title: '行业应用',
						id: 'a6',
						checked: false
					})
				}
				// for (let i = 0; i < this.detailMsg.length; i++) {
				// 	this.tabMsg.push({})
				// 	this.tabMsg[i].title = this.detailMsg[i].title
				// 	this.tabMsg[i].id = this.detailMsg[i].id
				// 	this.tabMsg[i].checked = false
				// }

				if (this.tabMsg.length) {
					this.tabMsg[0].checked = true
				}
			},

			onPopClose() {
				this.isPopShow = false
			},
			onPopOpen() {

			},
			onPurposeClick() {
				if (this.isSpecialProduct) {
					this.navigateWebView()
					return
				}
				uni.navigateTo({
					url: `/pages/purpose/purpose?id=${this.pageId}&type=1`
				})
			},
			async navigateWebView() {
				const secretPhone = uni.getStorageSync('h5EncryptPhone')
				if (!secretPhone) {
					const result = await queryPublicKey()
					const cryptPhone = result?.data || ''
					uni.setStorageSync('h5EncryptPhone', cryptPhone)
				}
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '该功能将于近期开放，敬请期待'
				// })
				// return
				// let url = 'https://cbcbp.dev.psbc.com:8443/sit/xwyloan/#/home'
				// url += `?phone=${uni.getStorageSync('h5EncryptPhone')}`
				// url += `&promoChannel=77`
				// url += `&enterModel=01`
				let url = getH5Url(uni.getStorageSync('h5EncryptPhone'))
				uni.showModal({
					title: '',
					content: '即将打开小微e贷H5登录页面',
					confirmText: '允许',
					cancelText: '取消',
					success(resp) {
						console.log('resp: ', resp);
						if (!resp.confirm) return

						uni.navigateTo({
							url: '/pages/webView/webView?url=' + encodeURIComponent(url),
						})
					},
				})
			},
			initMovablePosition() {
				const width = uni.getSystemInfoSync().windowWidth
				const height = uni.getSystemInfoSync().windowHeight
				this.x = width - 10
				this.y = height - 100
			},
			shareClick() {
				this.popItemList = []
				if (this.pageText1 && this.pageText1.length) {
					this.popItemList.push({
						name: '适用对象',
						val: this.pageText1,
						checked: false,
						className: 'longHeightTxtBox1',
						className2: 'pageText1BoxTxt'
					})
				}
				if (this.pageText8 && this.pageText8.length) {
					this.popItemList.push({
						name: '功能介绍',
						val: this.pageText8,
						checked: false,
						className: 'longHeightTxtBox8',
						className2: 'pageText8BoxTxt'
					})

				}
				if (this.pageText2 && this.pageText2.length) {
					this.popItemList.push({
						name: '产品优势',
						val: this.pageText2,
						checked: false,
						className: 'longHeightTxtBox2',
						className2: 'topTwoItem'
					})

				}
				if (this.pageText3 && this.pageText3.length) {
					this.popItemList.push({
						name: '服务案例',
						val: this.pageText3,
						checked: false,
						className: 'longHeightTxtBox3',
						className2: 'pageText3BoxTxt'
					})

				}
				if (this.pageText4 && this.pageText4.length) {
					this.popItemList.push({
						name: '办理流程',
						val: this.pageText4,
						checked: false,
						className: 'longHeightTxtBox4',
						className2: 'pageText4BoxTxt'
					})

				}
				if (this.pageText5 && this.pageText5.length) {
					this.popItemList.push({
						name: '办理材料',
						val: this.pageText5,
						checked: false,
						className: 'longHeightTxtBox5',
						className2: 'pageText5BoxTxt'
					})

				}
				this.isPopShow = true
			},
			onPopItemClick(item) {
				item.checked = !item.checked
				let arr = this.popItemList.filter(it => {
					return it.checked
				})
				if (arr.length) {
					this.popConfirmBtnDissable = false
				} else {
					this.popConfirmBtnDissable = true
				}

			},
			onPopConfrimClick() {
				let arr = this.popItemList.filter(it => {
					return it.checked
				})
				if (!arr.length) {
					return
				}
				uni.setStorageSync('pageTitle', this.pageTitle)
				new Promise((resolve) => {
					for (let [index, item] of arr.entries()) {
						// this.getDomHeight('.' + item.className, (res) => {
						item.height = 0
						// })
						// pageText1BoxTxt
						for (let [idx, it] of item.val.entries()) {
							if (item.name == '服务案例') {
								it.heights = []
								for (let [n, i] of it.content.entries()) {
									this.getDomsHeight('.pageText3BoxTxt' + (idx + 1), (r) => {
										item.height += (r[n].height + 12)
										it.heights.push({
											height: r[n].height + 4,
											name: i
										})
										if (index == arr.length - 1) {
											resolve()
										}
									})
								}
							} else {
								console.log('当前', item.className2)
								this.getDomsHeight('.' + item.className2, (re) => {
									console.log('结果', re)
									item.height += (re[idx].height + 10)
									it.height = re[idx].height + 4
									console.log(item,123123434343);
									if (index == arr.length - 1) {
										resolve()
									}
								})
							}

						}
					}
				}).then(() => {
					let descData = {
						height: 0,
						name: '介绍',
						// val:this.productDesc
					}


					if (this.productDesc && this.productDesc.length) {
						for (let [idx, it] of this.productDesc.entries()) {
							this.getDomsHeight('.introduceItem', (re) => {
								descData.height += (re[idx].height + 6)
								it.height = re[idx].height + 4

							})
						}
					}
					descData.val = this.productDesc

					setTimeout(() => {

						arr.unshift(descData)
						uni.setStorageSync('shareMsg', arr)
						this.onPopClose()
						this.onShareBtnClick()
					}, 200)


					// this.getDomHeight('.introduceBox', (res) => {
					// 	arr.unshift({
					// 		name: '介绍',
					// 		val: this.productDesc,
					// 		height: res.height
					// 	})
					// 	uni.setStorageSync('shareMsg', arr)
					// 	this.onPopClose()
					// 	this.onShareBtnClick()
					// })
				})

				console.log(arr)

			},

			onShareBtnClick() {
				uni.navigateTo({
					url: `/pages/share/share?type=1&id=${this.pageId}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onConnectItemClick(item) {
				if (item.id) {
					uni.navigateTo({
						url: `/pages/scheme/schemeDetail?id=${item.id}&name=${item.solutionTypeName}`
					})
				}
			},
			onGuideItemClick(item) {
				// uni.navigateTo({
				// 	url: `/pages/webView/webView?url=${item.url}`
				// })

				uni.setStorageSync('productLongImgItemMsg', item)
				uni.navigateTo({
					url: `/pages/product/productLongImg`
				})
			},

			onFavoriteClick: throttle(function() { //节流
				// 收藏 取消
				this.isFavoriteLoading = true
				const params = {
					businessId: this.pageId,
					businessType: 1
				}
				if (this.isFavorite) {
					canalFavorite(params).then(res => {
						if (res.code == '00000000') {
							this.isFavorite = false
							this.isFavoriteLoading = false
						}
					})
				} else {
					insertFavorite(params).then(res => {
						if (res.code == '00000000') {
							this.isFavorite = true
							this.isFavoriteLoading = false
						}
					})
				}
			}, 500),

			// onFavoriteClick() { // 收藏 取消


			// },
			onOpenBtnClick(val) {
				if (val == 1) {
					this.isShowMore1 = !this.isShowMore1
				} else if (val == 2) {
					this.isShowMore2 = !this.isShowMore2
				} else if (val == 3) {
					this.isShowMore3 = !this.isShowMore3
				} else if (val == 4) {
					this.isShowMore4 = !this.isShowMore4
				} else if (val == 5) {
					this.isShowMore5 = !this.isShowMore5
				} else if (val == 8) {
					this.isShowMore6 = !this.isShowMore6
				}
			},
			but(val) { // 锚点
				this.tabMsg.forEach(item => {
					item.checked = false
				})
				val.checked = true
				this.$forceUpdate()

				uni.createSelectorQuery().select('#' + val.id).boundingClientRect(data => { //目标位置的节点：类class或者id
					uni.createSelectorQuery().select(".container").boundingClientRect(
						res => { //最外层盒子的节点：类class或者id
							uni.pageScrollTo({
								duration: 100, //过渡时间
								scrollTop: data.top - 36 - res.top, //到达距离顶部的top值,300这个值根据自己情况调

								// scrollTop:data.top - res.top,//如果置顶
							})
						}).exec()
				}).exec();
			},


			/***
				登录逻辑
			**/
			onLoginConfirm() {
				this.showAuth = false
				this.getLogin();
			},
			onreject() {
				uni.setStorageSync('userMsg', '');
				uni.setStorageSync('phone', '');
				uni.setStorageSync('needLogin', false);
				this.showAuth = false;
				if (!this.isPicShare) { // 海报扫码进来的拒绝回首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			getQuekLogin() {
				// 分享进来的 先判断用户是否登陆过,不是新用户就直接调接口拿手机hao 静默登录
				const that = this
				if (uni.getStorageSync('phone')) {
					this.getLogin()
				} else {
					uni.login({
						success(res) {
							if (res.code) {
								//发起网络请求
								queryByOpenId(res.code).then(re => {
									if (re.data && re.data.loginName) {
										uni.setStorageSync('phone', re.data.loginName);
										that.getLogin()
									} else { // 新用户
										that.showAuth = true
										that.$forceUpdate()
									}
								})
								console.log(res)
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			getLogin() {
				const that = this
				uni.login({
					success(res) {
						let code = res.code;
						let phone = uni.getStorageSync('phone');
						let data = {
							phoneJsCode: uni.getStorageSync('phoneJsCode'),
							wechatJsCode: code,
							loginName: Encrypt.encrypt(phone) || phone
							// name: nickName
						};
						login(data)
							.then((res) => {
								if (res.code == '00000000') {
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync('userMsg', res.data);
									if (!that.isPicShare) { // 如果是海报分享进来的 先登录再拿id 获取列表
										queryById({
											id: that.shareId
										}).then(re => {
											that.pageId = re.data.businessId
											that.getPageMsg()
										})
									} else {
										that.getPageMsg()
									}
								}

							})
							.catch((err) => {});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../index/index.scss';

	.slot-content {
		width: 90%;
		margin: 0 auto;
	}

	.container {
		padding: 30rpx;
		color: #3B384B;
		font-size: 28rpx;
		// position: relative;

		.topBgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

		.topViewBox {
			margin-top: 30rpx;
		}

		.radiusBox {
			padding: 30rpx 30rpx 20rpx;
			background-color: #fff;
			border-radius: 30rpx;
			position: relative;
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 20rpx 0px #DCDFE6;
			font-size: 26rpx;

			&>view:first-child {
				position: relative;

				.topTxt {
					color: #3B384B;
					font-size: 30rpx;
					position: relative;
					z-index: 2;
					font-weight: 700;
					padding-left: 10rpx;
					margin-bottom: 30rpx;
					display: flex;

					image {
						height: 60rpx;
						width: 60rpx;
						vertical-align: top;
						margin-right: 10rpx;
						margin-top: -22rpx;
					}

					text {
						margin-top: -8rpx;
					}
				}

				.bottomImg {
					height: 20rpx;
					width: 328rpx;
					position: absolute;
					left: -5rpx;
					top: 30rpx;
				}
			}

			.topTwoItem {
				// display: flex;
				// font-size: 24rpx;
				padding-top: 4rpx;
				padding-bottom: 4rpx;

				&>view {
					font-weight: 700;
					text-indent: 56rpx;
					display: inline-block;
				}

				.blockTxt {
					text-indent: 56rpx;
					// display: inline-block;
				}

			}

			.topOneItem {
				padding-top: 6rpx;
				padding-bottom: 8rpx;
			}

			.pageText1BoxTxt,
			.pageText2BoxTxt,
			.pageText3BoxTxt,
			.pageText4BoxTxt,
			.pageText6BoxTxt,
			.pageText7BoxTxt,
			.pageText8BoxTxt,
			.pageText5BoxTxt {
				text-indent: 56rpx;
				display: flex;
			}

			.pageText3Box {
				.pageText3BoxTopBox {
					// color: #3B384B;
					font-size: 28rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
					padding-top: 15rpx;
					text-indent: 54rpx;
				}

				.pageText3BoxBottomBox {
					font-size: 26rpx;
					display: block;
					padding-top: 0rpx;
					// text-indent: 54rpx;
					line-height: 38rpx;
					color: #3B384B;

					.pageText3BoxTxt {
						// display: flex;
					}

					.pageText3BoxTxt.pageText3BoxTxt1 {
						text-indent: 50rpx;
					}
				}
			}

			.pageText4Box {
				// font-size: 28rpx;
				line-height: 38rpx;
				color: #3B384B;
			}

			.pageText5Box {
				margin: 4rpx 0;
				color: #3B384B;

				.circleBox {
					height: 8rpx;
					display: inline-block;
					width: 8rpx;
					vertical-align: middle;
					border-radius: 10rpx;
					margin-right: 10rpx;
					background-color: #9c9c9c;
				}
			}

			.pageText6Box {
				display: flex;
				flex-wrap: wrap;

				&>view {
					height: 40rpx;
					width: 29%;
					margin: 10rpx;
					text-align: center;
					line-height: 40rpx;
					color: #00BF5B;
					border: 2rpx solid #00BF5B;
					// font-size: 24rpx;
					border-radius: 40rpx;

					&>view {
						height: 100%;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						box-sizing: border-box;
						padding: 0 10rpx;
					}
				}

				.canClickTxt {
					text-decoration: underline;
					background-color: rgba(126, 211, 33, 0.2);
					border-radius: 40rpx;
				}
			}

			.showMoreBox {
				border-radius: 0px 0px 30rpx 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				width: 94%;
				position: absolute;
				bottom: -60rpx;
				text-align: center;
				color: #fff;
				left: 3%;
				background: linear-gradient(90deg, #00BF5B 0%, #B1C93E 100%), #F9F9F9;

				image {
					height: 30rpx;
					width: 30rpx;
					vertical-align: middle;
					margin-top: -4rpx;
					margin-left: 14rpx;
				}
			}
		}

		.showMoreMargin {
			margin-bottom: 90rpx;
		}

		.pageText8BoxTxt {
			color: #3B384B;
		}

		.fixHeightBox {
			color: #3B384B;
			height: 500rpx;
			overflow: hidden;
		}

		/* gradient text for modern browsers */
		@supports (background-clip: text) {
			.fixHeightBox {
				background-image: linear-gradient(#3B384B 60%, transparent);
				background-clip: text;
				color: transparent;
			}
		}

		.bottomItem {
			margin-top: 74rpx;

			.tagImg {
				height: 118rpx;
				width: 360rpx;
				display: block;
				margin: -88rpx auto 0;
			}
		}


		.topBox {
			position: relative;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 20rpx 0px #DCDFE6;
			padding-top: 60rpx;

			.topTxt {
				font-weight: 900;
			}

			.titlebgImg {
				width: 206rpx;
				height: 50rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.dbSix {
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
				height: 92rpx;
				width: 114rpx;
			}

			.dbNine {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				height: 92rpx;
				width: 114rpx;
			}

			.introduceBox {
				text-indent: 56rpx;

				.introduceItem {
					padding: 4prx 0;
				}
			}
		}

		.fixedBottomBox {
			position: fixed;
			z-index: 10;
			bottom: 0;
			left: 0;
			height: 100rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			padding: 14rpx 30rpx;
			display: flex;
			justify-content: space-between;

			&>view {
				display: flex;
				line-height: 100rpx;
				font-size: 26rpx;

				&>view {
					color: #9C9C9C;
					display: flex;
					line-height: 70rpx;
				}
			}

			&>view:first-child {
				/deep/ .u-icon {
					margin-top: -8rpx;
				}

				&>view:first-child {
					margin-right: 20rpx;
				}

				.shareBtn {
					position: absolute;
					height: 70rpx;
					width: 100rpx;
					opacity: 0;
				}
			}

			&>view:nth-child(2) {
				&>view {
					color: #fff;
					box-sizing: border-box;
					padding-left: 30rpx;
				}
			}

			.lftCircle {
				width: 210rpx;
				background-color: #7ED321;
				border-top-left-radius: 100rpx;
				border-bottom-left-radius: 100rpx;

			}

			.rtCircle {
				width: 180rpx;
				background-color: #00BF5B;
				border-top-right-radius: 100rpx;
				border-bottom-right-radius: 100rpx;
			}
		}

		.tabBox {
			position: sticky;
			top: 10rpx;
			z-index: 9;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			width: 94%;
			display: flex;
			justify-content: space-around;
			margin: 0 auto;
			border-radius: 15rpx;
			background: linear-gradient(90deg, #FFFFFF 0%, #03BF00 100%), #F9F9F9;

			&>view {
				// width: 20%;
				font-size: 24rpx;
			}

			.activeTab {
				background-color: #fff;
				font-weight: 800;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				box-sizing: content-box;
				margin-top: -10rpx;
				border-radius: 20rpx 20rpx 0px 0px;
			}
		}

		.zhanwei {
			height: 60rpx;
		}

		.swpBox {
			margin-bottom: 30rpx;
			height: 340rpx !important;
			width: 690rpx !important;

			/deep/ swiper {
				height: 340rpx !important;
			}

			/deep/ swiper-item {
				position: none !important;

				&>view {
					position: none !important;
				}
			}

			/deep/ .u-swiper {
				height: 340rpx !important;
				position: none !important;
			}

			/deep/ .swiper__wrapper__item__wrapper {
				position: none !important;
			}

			/deep/ image {
				height: 340rpx !important;
			}

			/deep/ video {
				height: 340rpx !important;
				width: 690rpx !important;
			}
		}

		.popupBox {
			padding: 20rpx 0;

			.popTitle {
				text-align: center;
				font-size: 28rpx;
				font-weight: 800;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;
				padding-top: 6rpx;
			}

			.popMsgBox {
				text-align: center;

				text {
					margin: 20rpx 0 30rpx;
					display: block;
				}

				&>view {
					display: flex;
					flex-wrap: wrap;

					.popItemBtn {
						width: 30%;
						margin: 10rpx;
						height: 70rpx;
						border-radius: 6rpx;
						line-height: 70rpx;
						text-align: center;
						border: 1rpx solid #3B384B;
					}

					.checkedPopBtn {
						background-color: #7ED321;
						border: 1rpx solid #7ED321;
						color: #fff;
					}
				}

				.popConfirmBtn {
					height: 70rpx;
					line-height: 70rpx;
					color: #fff;
					border-radius: 60rpx;
					display: block;
					text-align: center;
					width: 94%;
					margin: 30rpx auto 10rpx;
					background-color: #7ED321;
				}

				.popConfirmDissabled {
					background-color: #99d36a;
				}

				.jianjieBtn {
					background-color: #99d36a;
					border: 1rpx solid #99d36a !important;
					color: #fff;
					margin-top: 20rpx !important;
				}
			}
		}

	}

	.pageText1BoxTxt {
		color: #3B384B !important;
	}

	.pageText2BoxTxt {
		color: #3B384B !important;
	}

	.pageText3BoxTxt {
		color: #3B384B !important;
	}

	movable-view {
		pointer-events: auto;
	}

	movable-area {
		z-index: 99;
		pointer-events: none;
	}
</style>